<template>
    <a-spin dot :loading="isLoading" style=" height:100%">
        <div class="app-container stencil-container">
            <a-breadcrumb style="margin-bottom: 20px">
                <a-breadcrumb-item v-for="item in label">{{ item }}</a-breadcrumb-item>
            </a-breadcrumb>
            <micro-app v-if="!isError" class="micro-app" name="stencil" destroy :url="appUrlConfig.finance"
                baseroute="/" :data="{ token: getToken(), userInfo: userStore.userInfo }" router-mode="native"
                @mounted="microAppMounted" @error="onError" />
            <ErrorPage v-else :code="500"></ErrorPage>
        </div>
    </a-spin>
</template>

<script setup lang="ts">
import { getToken } from "@/utils/auth";
import appUrlConfig from "@/config/appUrlconfig";
import { useUserStore } from "@/stores";
import ErrorPage from "@/views/error/components/ErrorPage.vue";
import microApp from '@micro-zoe/micro-app';
import { mainReceiveData } from "@/microApp/utils";

const userStore = useUserStore()
const isLoading = ref(true);
const microAppMounted = () => {
    isLoading.value = false;
};
const isError = ref(false);
const onError = () => {
    isError.value = true;
    isLoading.value = false;
};
const label = ref<string[]>([]);
mainReceiveData("stencil", (data: any) => {
    label.value = data.meta.title;
});
</script>

<style scoped lang="scss">
.stencil-container {
    height: 100%;
    box-sizing: border-box;
}

.micro-app {
    height: calc(100% - 44px);
}

:deep(micro-app-body) {
    height: 100%;
    background-color: white;
    border-radius: 10px;
}
</style>